<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
      <text class="title">{{title}}</text>
      <view>{{ number + 1 }}</view>
      <view>{{ ok ? 'YES' : 'NO' }}</view>
      <view>{{ message.split('').reverse().join('') }}</view>
    </view>
    <view v-for="item in arr" style="color: #ff0000;">
      {{ item }}
    </view>
    <view v-for="(item, index) in 5" style="color: #00ff00;">
      {{ index + 2 }}
    </view>
    <view v-for="(value, name, index) in object">
      {{ index }}---{{ name }}---{{ value }}
    </view>
    
    <!-- 带key的列表循环 -->
    <view v-for="item in arr" :key="item.id" style="color: #333333;">
      {{ item.id }}:{{ item.name }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello',
      number: 1,
      ok: true,
      message: 'Hello Vue',
      arr: [
        { id: 1, name: 'uni-app' },
        { id: 2, name: 'HTML' },
        { id: 3, name: 'wechat' },
        { id: 4, name: 'Android' }
      ],
      object: {
        title: 'How to do lists in Vue',
        author: 'Jane Doe',
        publishedAt: '2020-04-10'
      }
    };
  }
};
</script>

<style scoped>
.content {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.logo {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 20rpx;
}
.text-area {
  margin-bottom: 20rpx;
  text-align: center;
}
.title {
  font-size: 32rpx;
  margin-bottom: 10rpx;
  display: block;
}
view {
  margin-bottom: 10rpx;
  font-size: 28rpx;
}
</style>